<!--  -->
<template>
    <div class=''>
        <el-container>
            <el-header style="font-style:italic; font-weight:600">
                <h2>联系员工</h2>
            </el-header>
            <el-main>
                <h3 style="font-weight:700;margin-left: 50px;">石家庄惊鸿办公有限公司</h3>
                <span style="margin-left: 50px;">地址：石家庄市鹿泉区玄武大道699-32号惊鸿大厦</span><br />
                <span style="margin-left: 50px;">邮编：210042</span><br />
                <span style="margin-left: 50px;">电话：025-8008208820</span><br />
                <span style="margin-left: 50px;">传真：025-8008208820</span><br />
                <span style="margin-left: 50px;">办公自动化系统预订热线：4007-999-999</span><br />
                <br />
                <span style="margin-left: 50px;">使用下方邮箱联系员工!</span><br />
                <el-link style="margin-left: 50px;"><span
                        @click="dialogVisible = true">邮箱：2934343875@qq.com</span></el-link>


                <el-dialog title="发送邮件" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="标题" prop="subject">
                            <el-input v-model="form.subject" placeholder="必填" maxlength="20" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="员工邮箱" prop="to">
                            <el-input v-model="form.to" placeholder="必填"></el-input>
                        </el-form-item>
                    <!-- <el-form-item label="发件人" prop="addresser">
                            <el-input v-model="form.addresser"></el-input>
                                    </el-form-item> -->

                        <el-form-item label="内容" prop="text">
                            <!--          内容文本域-->
                            <el-input v-model="form.text" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 8 }"
                                maxlength="300" show-word-limit />
                        </el-form-item>

                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="submitForm">发送邮件</el-button>
                    </span>
                </el-dialog>

            </el-main>
        </el-container>

        <el-container>
            <!-- <el-header style="font-style:italic; font-weight:700">
                <h2>合作</h2>
            </el-header> -->
            <!-- <el-main>
                <div>
                    <div style="width: 400px;float:left;margin-top: 10px; margin-left: 160px;">
                        <img class="imgOne" src="../../assets/images/屏幕截图 2023-03-17 092334.png" />
                        <a href="#"><span :class="this.isShop.yesShop ? 'modOne' : 'modTwo'" @mouseover="mouseOver()"
                                @mouseleave="mouseLeave()">商务合作</span></a><br />
                        <span style="margin-left: 24px;">电话：025-8008208820转3</span><br />
                        <span style="margin-left: 24px;">邮箱：cooperation@tuniu.com</span>
                    </div>
                    <div style="width: 400px;float:left;margin-top: 10px;">
                        <img class="imgOne" src="../../assets/images/屏幕截图 2023-03-17 103916.png" />
                        <a href="#"><span :class="this.isShop.yesShopOne ? 'modThree' : 'modFour'"
                                @mouseover="mouseOverOne()" @mouseleave="mouseLeaveOne()">银行合作</span></a><br />
                        <span style="margin-left: 24px;">电话：025-8008208820转1</span><br />
                        <span style="margin-left: 24px;">邮箱：marketing@tuniu.com</span>
                    </div>
                    <div style="width: 400px;float:left;margin-top: 10px;">
                        <img class="imgOne" src="../../assets/images/屏幕截图 2023-03-17 092614.png" />
                        <a href="#"><span :class="this.isShop.yesShopTwo ? 'modFive' : 'modSix'" @mouseover="mouseOverTwo()"
                                @mouseleave="mouseLeaveTwo()">媒体合作</span></a><br />
                        <span style="margin-left: 24px;">电话：025-8008208820转2</span><br />
                        <span style="margin-left: 24px;">邮箱：tuniumc@tuniu.com</span>
                    </div>
                </div>

            </el-main> -->
            <!-- <el-footer style="height: 400px; background-color: #ffffff; color: #000000; text-align: center;">
                __________________________________________________________________________________________________________________________________________________________________
                <br />
                惊鸿客服中心设立在江苏南京及江苏宿迁，来电显示号码请查看： <a href="#">惊鸿客服中心外呼电话号码汇总</a><br />

                北京惊鸿国际办公有限公司，业务经营许可证编号：L-BJ-CJ00144　　石家庄惊鸿办公有限公司，业务经营许可证编号：L-SH-CJ00107<br />

                <a href="#">于我们</a>关 Investor Relations <a href="#">投诉建议</a> <a href="#">广告服务</a> <a href="#">惊鸿招聘</a> <a
                    href="#">隐私保护</a> <a href="#">免责声明 </a><a href="#">平台服务协议</a> <a href="#">平台交易规则</a> <a
                    href="#">网站地图</a> <br /> UEIP <a href="#">帮助中心</a> <a href="#">网信办辟谣专栏</a> <br />

                Copyright © 2006-2023 石家庄惊鸿科技有限公司 Tuniu.com | 营业执照 | ICP证：石B2-20130006 | 石ICP备12009060号-4 | 石网食备A32000000032
                | 北京惊鸿科技网 <br />

                全国投诉热线12345</el-footer> -->
        </el-container>
    </div>
</template>

<script>
import { goEmail } from "@/api/email/email";
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            isShop: {
                yesShop: true,
                yesShopOne: true,
                yesShopTwo: true,
                yesShopThree: true
            },
            dialogVisible: false,
            form: {
                to: '',
                subject: '',
                text: '',
            },
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,

            // 表单校验
            rules: {
                subject: [
                    { required: true, message: "标题不能为空", trigger: "blur" },
                    { max: 19, message: "最大字符应小于20个", trigger: "change" }
                ],
                text: [
                    { required: true, message: "内容不能为空", trigger: "blur" },
                    { max: 299, message: "最大字符应小于300个", trigger: "change" }

                ],
                to: [
                    { required: true, message: "邮箱不能为空", trigger: "blur" },
                    {
                        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
                        required: true,
                        message: "请输入正确的邮箱格式",
                        trigger: "blur"
                    }
                ]
            }

        };


    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        mouseOver() {
            this.isShop.yesShop = false

        },
        mouseLeave() {
            this.isShop.yesShop = true
        },
        mouseOverOne() {
            this.isShop.yesShopOne = false

        },
        mouseLeaveOne() {
            this.isShop.yesShopOne = true
        },
        mouseOverTwo() {
            this.isShop.yesShopTwo = false

        },
        mouseLeaveTwo() {
            this.isShop.yesShopTwo = true
        },
        mouseOverThree() {
            this.isShop.yesShopThree = false

        },
        mouseLeaveThree() {
            this.isShop.yesShopThree = true
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        onSubmit() {
            console.log('submit!');
        },

       


        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    goEmail(this.form)
                    this.$modal.msgSuccess("邮件发送成功");
                    this.poen = false;
                    this.dialogVisible = false
                }
            });
        },
        // 取消按钮
        cancel() {
            this.dialogVisible = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                noId: null,
                title: null,
                content: null,
                publishTime: null,
                ifCancel: null,
                cancelTime: null,
                priority: null,
                version: null
            };
            this.resetForm("form");
        },
    },
    //生命周期 - 创建完成(可以访问当前this实例)
    created() {
       
    },
    //生命周期 - 挂载完成(可以访问DOM元素)
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style>
.el-header,
.el-footer {
    background-color: #bcc2c097;
    color: #333;
    /* text-align: center; */
    line-height: 60px;
}

.el-aside {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 200px;
}

h3 {
    color: #13be9b;
}

.modTwo {
    color: #ff751f;
    font-size: 20px;
    margin-left: 24px;
    margin-top: 50px;
    line-height: 45px;
}

.modOne {
    color: #000000;
    font-size: 20px;
    margin-left: 24px;
    margin-top: 50px;
    line-height: 45px;
}

.modFour {
    color: #ff751f;
    font-size: 20px;
    margin-left: 24px;
    margin-top: 50px;
    line-height: 45px;
}

.modThree {
    color: #000000;
    font-size: 20px;
    margin-left: 24px;
    margin-top: 50px;
    line-height: 45px;
}

.modSix {
    color: #ff751f;
    font-size: 20px;
    margin-left: 24px;
    margin-top: 50px;
    line-height: 45px;
}

.modFive {
    color: #000000;
    font-size: 20px;
    margin-left: 24px;
    margin-top: 50px;
    line-height: 45px;
}

.modEight {
    color: #ff751f;
    font-size: 20px;
    margin-left: 24px;
    margin-top: 50px;
    line-height: 45px;
}

.modSeven {
    color: #000000;
    font-size: 20px;
    margin-left: 24px;
    margin-top: 50px;
    line-height: 45px;
}

/* #email{

  } */


.imgOne {
    width: 90px;
    height: 92px;
    display: inline-block;
    float: left;
}

.el-main {
    background-color: #ffffff;
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
}

.e {
    color: #000000;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>